<template>
  <div class="match">
    <!--Menu-->
    <div class="navbar">
      <div class="navbar-container">
        <img class="icon_logo" :src="logoUrl">
        <div class="nav-panel">
<!--          <a-->
<!--            href="/"-->
<!--            target="_self"-->
<!--            class=""-->
<!--            :class="{ isActive: activeLink === 1 }"-->
<!--            @click="tabHandleClick(1)"-->
<!--          >-->
<!--            首页-->
<!--          </a>-->
<!--          <p class="link" />-->
          <a
            href="javascript:void(0)"
            target="_self"
            :class="{ isActive: activeLink === 2 }"
            @click="tabHandleClick(2)"
          >
            赛程
          </a>
          <p class="link" />
<!--          <a-->
<!--            href="javascript:void(0)"-->
<!--            target="_self"-->
<!--            :class="{ isActive: activeLink === 3 }"-->
<!--            @click="tabHandleClick(3)"-->
<!--          >-->
<!--            赛事库-->
<!--          </a>-->
<!--          <p class="link" />-->
          <a
            href="javascript:void(0)"
            target="_self"
            :class="{ isActive: activeLink === 3 }"
            @click="tabHandleClick(3)"
          >
            战队排名
          </a>
          <p class="link" />
          <a
            href="javascript:void(0)"
            target="_self"
            :class="{ isActive: activeLink === 5 }"
            @click="tabHandleClick(5)"
          >
            排位系统
          </a>
        </div>
      </div>
    </div>
    <template v-if="activeLink === 2">
      <!--Date-->
      <div class="schedule-wrapper default-container">
        <!--Filter-->
        <div class="schedule-nav">
          <div class="nav-date">
            <div class="cal-panel">
              <img class="date_icon" :src="dateUrl">
              <p>日历</p>
              <img class="drop-btn" :src="downUrl">
              <Calendar
                class="calendar-panel"
                :ago-day-hide="agoDayHide"
                :future-day-hide="futureDayHide"
                @choseDay="clickDay"
                @changeMonth="changeDate"
              />
            </div>
            <div class="calc-panel">
              <div
                v-for="(item, index) in dateWeekList"
                :key="index"
                class="date-item"
                :class="item.class"
                @click="handleDateItemClick(item)"
              >
                <div class="date-panel">
                  <p class="date-item-calc">{{ formatDate(item.date) }}</p>
                  <p class="date-item-week">{{ item.day }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="game-panel">
            <div class="r-game">
              <div class="game-list">
                <div
                  v-for="(item, index) of games"
                  :key="index"
                  class="game-list--item"
                >
                  <div class="game-list--item-pointer" @click="changeGameActive(item)">
                    <img
                      style="width: 18px; height: 18px; margin-right: 6px"
                      :src="item.icon"
                      alt=""
                    >
                    <div :style="{'font-size': '12px', color: item.value === gameActive ? '#FD9900' : '#9a9a9a'}">
                      {{ item.label }}
                    </div>
                  </div>
                  <div
                    v-if="index !== games.length - 1"
                    style="margin: 0 12px; color: #ececec; user-select: none"
                  >
                    |
                  </div>
                </div>
              </div>
              <div class="flex-end-center fs-12 filters">
<!--                <div style="color: #9a9a9a">筛选：</div>-->
<!--                <el-switch-->
<!--                  v-model="onlySee"-->
<!--                  style="zoom: 0.8; margin-right: 16px"-->
<!--                  inactive-text="只看主播"-->
<!--                />-->
<!--                <div class="cascader-select" @click="showCascaderModel">-->
<!--                  <div style="margin-right: 2px">选择联赛</div>-->
<!--                  <i class="el-icon-arrow-down" />-->
<!--                  <div v-if="showCascader" class="cascader-model" @click.stop>-->
<!--                    <div class="cascader-model-content">-->
<!--                      <div-->
<!--                        v-for="(it, key) of cascaderData"-->
<!--                        :key="key"-->
<!--                        style="margin-bottom: 16px"-->
<!--                      >-->
<!--                        <div>{{ it.groupName }}</div>-->
<!--                        <div class="flex-container">-->
<!--                          <el-checkbox-->
<!--                            v-for="(k, i) of it.list"-->
<!--                            :key="i"-->
<!--                            v-model="k.checked"-->
<!--                            border-->
<!--                            size="medium"-->
<!--                          >-->
<!--                            {{ k.label }}-->
<!--                          </el-checkbox>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="flex-between-center cascader-model-actions">-->
<!--                      <div class="flex-start-center">-->
<!--                        <el-button-->
<!--                          type="text"-->
<!--                          style="color: #555555; font-size: 12px"-->
<!--                          @click.stop="checkAll"-->
<!--                        >-->
<!--                          全选-->
<!--                        </el-button>-->
<!--                        <el-button-->
<!--                          type="text"-->
<!--                          style="-->
<!--                            color: #555555;-->
<!--                            font-size: 12px;-->
<!--                            margin-left: 30px;-->
<!--                          "-->
<!--                          @click.stop="reCheck"-->
<!--                        >-->
<!--                          反选-->
<!--                        </el-button>-->
<!--                        <el-button-->
<!--                          type="text"-->
<!--                          style="-->
<!--                            color: #555555;-->
<!--                            font-size: 12px;-->
<!--                            margin-left: 30px;-->
<!--                          "-->
<!--                          @click.stop="checkHot"-->
<!--                        >-->
<!--                          热门-->
<!--                        </el-button>-->
<!--                      </div>-->
<!--                      <div class="flex-end-center">-->
<!--                        <el-button-->
<!--                          type="text"-->
<!--                          style="-->
<!--                            color: #555555;-->
<!--                            font-size: 12px;-->
<!--                            margin-right: 30px;-->
<!--                          "-->
<!--                          @click.stop="cancelModel"-->
<!--                        >-->
<!--                          取消-->
<!--                        </el-button>-->
<!--                        <el-button-->
<!--                          size="small"-->
<!--                          type="warning"-->
<!--                          plain-->
<!--                          @click.stop="confirmModel"-->
<!--                        >-->
<!--                          确定-->
<!--                        </el-button>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div>隐藏({{ hideNumber }})场</div>-->
<!--                <div class="game-tabs">-->
<!--                  <div-->
<!--                    :class="-->
<!--                      filterActive === 0-->
<!--                        ? ['game-tabs-item', 'tabs-active']-->
<!--                        : ['game-tabs-item']-->
<!--                    "-->
<!--                    @click="changeFilterActive(0)"-->
<!--                  >-->
<!--                    全部-->
<!--                  </div>-->
<!--                  <div-->
<!--                    :class="-->
<!--                      filterActive === 1-->
<!--                        ? ['game-tabs-item', 'tabs-active']-->
<!--                        : ['game-tabs-item']-->
<!--                    "-->
<!--                    @click="changeFilterActive(1)"-->
<!--                  >-->
<!--                    热门-->
<!--                  </div>-->
<!--                </div>-->
              </div>
            </div>
          </div>
          <div class="lottery-type-panel top-line">
            <div
              v-for="item in lotteryList"
              :key="item.type"
              class="lottery-item"
            >
              <p
                class="btn"
                :class="{ active_btn: activeLottery === item.type }"
                @click="handleClickLottery(item.type)"
              >
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
        <!--Table-->
        <div class="match-panel">
          <el-table
            class="rTable"
            :data="compareInfoList"
            size="mini"
            tooltip-effect="dark"
            :header-cell-style="tableRowClassName"
            :show-header="false"
            @row-click="rowClick"
          >
            <el-table-column
              v-for="item of columns"
              :key="item.prop"
              :label="item.label"
              align="center"

              v-bind="item"
            >
              <template slot-scope="scope" class="table-cell">
                <render-cell
                  v-if="item.renderCell"
                  :render="() => item.renderCell(scope.row)"
                />
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: #cccccc; font-size: 12px"
                  @click.stop="toDetails(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="showCascader" class="match-mask" @click="cancelModel" />
      <!--Footer-->
      <div class="footer" />
    </template>
    <template v-if="activeLink === 3"> <div class="schedule-wrapper default-container">
      <div class="match-panel">
        <el-table
          class="rTable"
          :data="teamListData"
          size="mini"
          tooltip-effect="dark"
          :header-cell-style="tableRowClassName"
          :show-header="true"
          @row-click="rowClick"
        >
          <el-table-column
            v-for="item of teamColums"
            :key="item.prop"
            :label="item.label"
            align="center"

            v-bind="item"
          >
            <template slot-scope="scope" class="table-cell">
              <render-cell
                v-if="item.renderCell"
                :render="() => item.renderCell(scope.row)"
              />
              <div v-else>{{ scope.row[item.prop] }}</div>
            </template>
          </el-table-column>
          <el-table-column
          label="成员"
          align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: #cccccc; font-size: 12px"
                @click.stop="toDetails(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div></template>
    <template v-if="activeLink === 4"> <div class="schedule-wrapper default-container">待开发 </div> </template>
    <template v-if="activeLink === 5"> <div class="schedule-wrapper default-container">待开发 </div> </template>

    <div style="height: 300px"></div>


    <el-dialog title="战队成员" :visible.sync="isTeamDetails">
      <el-table
        class="rTable"
        size="mini"
        tooltip-effect="dark"
        :header-cell-style="tableRowClassName"
        :show-header="true"
        :data="teamDetailsList">
<!--        序号-->
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="steamid" width="150" prop="steamId" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <el-link :href="'http://yy.xzcc.cc/steam.php?id=' + row.steamid" type="primary" target="_blank">
              {{ row.steamid }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column property="nickname" label="姓名" width="200"></el-table-column>
        <el-table-column property="email" label="邮箱"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getInfoList,getTeamInfo,listInfoMatch,getTeamMemberInfo } from '@/api/match/squadMatchTeamCompareInfoInfo'
import renderCell from './components/renderCell.vue'
import Calendar from 'vue-calendar-component'
export default {
  name: 'Match',
  components: { 'render-cell': renderCell, Calendar },
  data() {
    return {
      teamDetailsList:[],
      isTeamDetails:false,
      logoUrl: require('@/assets/images/dly.png'),
      dateUrl: require('@/assets/images/match_date.png'),
      downUrl: require('@/assets/images/match_down.png'),
      activeLink: 2, // tab切换默认值
      agoDayHide: null, // 某个日期以前的不允许点击
      futureDayHide: null, // 某个日期以后的不允许点击
      isAll:false ,//查看是否是历史赛季
      dateWeekList: [],
      lotteryList: [
        { name: '历史赛程', type: 1 },
        // { name: '北单比分', type: 2 },
        // { name: '竞彩比分', type: 3 },
        // { name: '足彩比分', type: 4 }
      ],
      activeLottery: 1,
      // 条件筛选区域数据
      games: [
        {
          label: 'squad',
          icon: 'https://s21.ax1x.com/2024/07/17/pkoej1S.jpg',
          value: 4
        },
        // {
        //   label: '王者荣耀',
        //   icon: 'https://qn.tianqifengyun.cn/pcweb/icon_game_type_new_kog.png',
        //   value: 5
        // }
      ],
      gameActive: 2,
      // 隐藏数量
      hideNumber: 0,
      // 只看主播
      onlySee: false,
      // 全部/热门
      filterActive: 0,
      teamListData:[],
      compareInfoList:[],
      // table数据
      tableData: [
        {
          logo: 'https://s21.ax1x.com/2024/07/15/pk5YT8s.png',
          time: '00:00',
          step: 'BO1',
          competition: 'CBLOL第二季',
          status: '已结束',
          name1: 'VKS',
          icon1:
            'https://esports-cdn.namitiyu.com/lol/team/FmCBScP00wG-UxS4RiV58kK6NgLw?imageView2/2/w/36/h/36',
          score: [0, 5],
          icon2:
            'https://esports-cdn.namitiyu.com/lol/team/Fj29nSnJI4hEAgjwtGFeNjVEAKOH?imageView2/2/w/36/h/36',
          name2: 'FX',
          video: 'https://qn.tianqifengyun.cn/pcweb/icon_video.png',
          hot: 'https://qn.tianqifengyun.cn/pcweb/icon_fire_001.png',
          hotNumber: '2256',
          star: 'https://qn.tianqifengyun.cn/pcweb/icon_collect_def.png'
        }
      ],
      // 全选反选数据
      showCascader: false,
      cascaderData: [
        {
          groupName: '热门赛事',
          type: 'hot',
          list: [
            { label: 'LEC夏季赛', checked: true },
            { label: 'LPL夏季赛', checked: false }
          ]
        },
        {
          groupName: '其它赛事',
          type: 'other',
          list: [
            { label: 'CBLOL第二季', checked: true },
            { label: 'HM夏季赛', checked: false },
            { label: 'LCKCL夏季赛', checked: true },
            { label: 'LCO第二季', checked: true },
            { label: 'NACL夏季赛', checked: true }
          ]
        }
      ],
      cascaderCache: [
        {
          groupName: '热门赛事',
          type: 'hot',
          list: [
            { label: 'LEC夏季赛', checked: true },
            { label: 'LPL夏季赛', checked: false }
          ]
        },
        {
          groupName: '其它赛事',
          type: 'other',
          list: [
            { label: 'CBLOL第二季', checked: true },
            { label: 'HM夏季赛', checked: false },
            { label: 'LCKCL夏季赛', checked: true },
            { label: 'LCO第二季', checked: true },
            { label: 'NACL夏季赛', checked: true }
          ]
        }
      ]
    }
  },
  computed: {
    teamColums(ctx){
      return [
        {
          prop: 'teamLogo',
          label: "logo",
          renderCell: (row) => {
            return (
              <div class='flex-center-center'>
                <img
                  style='width: 18px; height: 18px; display: block'
                  src={row.teamLogo}
                />
              </div>
            )
          }
        },
        { prop: 'teamName',
          label: "队伍" },
        { prop: 'teamAbbreviation',
          label: "简称" },
        { prop: 'wins',
          label: "胜场" },
        { prop: 'losses',
          label: "败场" },
        { prop: 'totalMatches',
          label: "总场次" },
        { prop: 'winRate',
          label: "胜率" ,
          renderCell:(row)=>{
          return (<div className='flex-center-center'>{row.winRate}%</div>)
          }

        },
        { prop: 'ranking',
          label: "排名" },
        // {
        //   prop: 'popularity',
        //   label: "热度",
        //   renderCell: (row) => {
        //     return (
        //       <div class='flex-center-center'>
        //         <img
        //           style='width: 16px; height: 16px; display: block;'
        //           src='https://qn.tianqifengyun.cn/pcweb/icon_fire_001.png'
        //         />
        //         <div style='font-size: 12px;'>{row.popularity}</div>
        //       </div>
        //     )
        //   }
        // }
      ]
    },
    columns(ctx) {
      // img-图片 default-默认 action-操作按钮
      return [
        {
          prop: 'logo',
          label: "logo",
          renderCell: (row) => {
            return (
              <div class='flex-center-center'>
                <img
                  style='width: 18px; height: 18px; display: block'
                  src={'https://s21.ax1x.com/2024/07/17/pkoej1S.jpg'}
                />
              </div>
            )
          }
        },
        { prop: 'time',
        renderCell: (row) => {
          if(this.isAll){
            return   <div className='flex-center-center'>
              {row.date} {row.time}
            </div>
          }else {
           return <div className='flex-center-center'>
              {row.time}
            </div>
          }
        }

        },
        { prop: 'pattern' },
        { prop: 'leagueMatchName' },
        { prop: 'matchStatus' },
        {
          prop: 'team1',
          renderCell: (row) => {
            return (
              <div class='flex-center-center-right'>
                <div style='margin-right: 4px;'>{row.team1}</div>
                <img
                  style='width: 18px; height: 18px; display: block;'
                  src={row.logo1}
                />
              </div>
            )
          }
        },
        {
          prop: 'score1',
          renderCell: (row) => {
            const maxIndex = row.score1>row.score2
            const hasMax = row.score1 !== row.score2
            console.log(maxIndex)
            return (
              <div class='flex-center-center'>
                <div
                  class='score-text'
                  style={
                    hasMax && maxIndex === true
                      ? { color: '#FF6215' }
                      : { color: '#555555' }
                  }
                >
                  {row.score1}
                </div>
                <div style='margin: 0 4px;'>:</div>
                <div
                  class='score-text'
                  style={
                    hasMax && maxIndex === false
                      ? { color: '#FF6215' }
                      : { color: '#555555' }
                  }
                >
                  {row.score2}
                </div>
              </div>
            )
          }
        },
        {
          prop: 'name2',
          renderCell: (row) => {
            return (
              <div class='flex-center-center-left'>
                <img
                  style='width: 18px; height: 18px; display: block;'
                  src={row.logo2}
                />
                <div style='margin-left: 4px;'>{row.team2}</div>
              </div>
            )
          }
        },
        {
          prop: 'referee',
          renderCell: (row) => {
            return (
              <div class='flex-center-center'>
                  {row.referee}
              </div>
            )
          }
        },
        {
          prop: 'popularity',
          renderCell: (row) => {
            return (
              <div class='flex-center-center'>
                <img
                  style='width: 16px; height: 16px; display: block;'
                  src='https://qn.tianqifengyun.cn/pcweb/icon_fire_001.png'
                />
                <div style='font-size: 12px;'>{row.popularity}</div>
              </div>
            )
          }
        }
        // ,
        // {
        //   prop: 'star',
        //   renderCell: (row) => {
        //     return (
        //       <div class='flex-center-center'>
        //         <img
        //           onClick={(e) => ctx.getStar(e, row)}
        //           style='width: 16px; height: 16px; display: block;'
        //           src='https://qn.tianqifengyun.cn/pcweb/icon_collect_def.png'
        //         />
        //       </div>
        //     )
        //   }
        // }
      ]
    },
    formatDate() {
      return function(date) {
        const [year, month, day] = date.split('/') // 将日期字符串拆分为年、月、日
        const formattedDate = `${parseInt(month)}月${parseInt(day)}日` // 格式化为 "7月15日" 形式
        return formattedDate
      }
    }
  },
  created() {
    // 获取上个月最后一天的时间戳（毫秒）
    this.agoDayHide = this.getLastDayTimestampOfPreviousMonth()
    // 获取本月最后一天的时间戳（毫秒）
    this.futureDayHide = this.getLastDayTimestampOfCurrentMonth()
    // 初始化周数据
    const currentDate = new Date() // 获取当前日期对象
    const date = `${currentDate.getFullYear()}/${
      currentDate.getMonth() + 1
    }/${currentDate.getDate()}` // 格式化当前日期为 'yyyy/mm/dd' 格式
    this.dateWeekList = this.getWeekDates(date);
    console.log(date);
    this.compareInfo(date);
    this.teamInfo();
  },
  methods: {
    teamInfo(){
      getTeamInfo().then((res)=>{
        this.teamListData = res.rows;
      });
    },
    compareInfo(date) {
      getInfoList({
        date: date
      }).then((res) => {
        this.isAll = false
        this.compareInfoList = res.rows
      });
    },
    tableRowClassName({row, rowIndex}) {
      return 'background: #fff;';
    },
    // 顶部tab切换
    tabHandleClick(index) {
      this.activeLink = index
    },
    // 获取星期几的字符串表示
    getDayOfWeekString(dayOfWeek) {
      const days = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      return days[dayOfWeek]
    },
    // 反转日期字符串的顺序
    reverseDateString(dateString) {
      const parts = dateString.split('/')
      return `${parts[2]}/${parts[0]}/${parts[1]}`
    },
    // 根据日期获取当前周数据
    getWeekDates(date) {
      const currentDate = new Date(date) // 转换为日期对象
      const dayOfWeek = currentDate.getDay() // 获取当前日期的星期几（0 表示星期日，1 表示星期一，以此类推）

      // 计算当前日期所在周的第一天（本周的星期一）
      const firstDayOfWeek = new Date(
        currentDate.getTime() -
          (dayOfWeek === 0 ? 6 : dayOfWeek - 1) * 24 * 60 * 60 * 1000
      )
      const weekDates = []
      for (let i = 0; i < 7; i++) {
        const currentDate = new Date(
          firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000
        ) // 每次增加一天的时间戳
        const year = currentDate.getFullYear() // 获取年份
        const month = currentDate.getMonth() + 1 // 获取月份（注意月份从 0 开始，需要加 1）
        const day = currentDate.getDate() // 获取日期
        const formattedDate = `${year}/${month}/${day}` // 格式化为 "2024/7/21" 形式
        const dateObj = {
          date: formattedDate,
          day: this.getDayOfWeekString(currentDate.getDay())
        }
        if (formattedDate === date) {
          dateObj.class = 'dateActive' // 添加 class 属性为 'dateActive'
        }
        weekDates.push(dateObj) // 添加包含日期和星期几的对象到数组中
      }

      return weekDates
    },
    // 日期选择事件
    clickDay(data) {
      this.compareInfo(data);
      const weekDates = this.getWeekDates(data)
      this.dateWeekList = weekDates
    },
    changeDate(data) {
      console.log('data22: ', data) // 左右点击切换月份
    },
    // 周数据点击事件
    handleDateItemClick(item) {
      console.log('item: ', item)
      this.compareInfo(item.date);
      this.dateWeekList = this.dateWeekList.map((dateItem) => {
        if (dateItem !== item) {
          const { class: _, ...rest } = dateItem
          return rest
        }
        return {
          ...dateItem,
          class: 'dateActive'
        }
      })
    },
    // 获取上个月的最后一天的时间戳（毫秒）
    getLastDayTimestampOfPreviousMonth() {
      const currentDate = new Date()
      let previousMonth = currentDate.getMonth() - 1
      let year = currentDate.getFullYear()
      // 处理跨年的情况
      if (previousMonth < 0) {
        previousMonth = 11 // 11 代表 12 月
        year -= 1
      }
      const lastDay = new Date(year, previousMonth + 1, 0)
      const timestamp = lastDay.getTime()
      return timestamp.toString().substring(0, 10)
    },
    // 获取本月的最后一天的时间戳（毫秒）
    getLastDayTimestampOfCurrentMonth() {
      const currentDate = new Date()
      const year = currentDate.getFullYear()
      const month = currentDate.getMonth()

      const lastDay = new Date(year, month + 1, 0)
      const timestamp = lastDay.getTime()
      return timestamp.toString().substring(0, 10)
    },
    // 比分搜索切换
    handleClickLottery(type) {
      console.log('handleClickLottery：', type)
      listInfoMatch({
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        this.isAll = true
        this.compareInfoList = res.rows
      })
      this.activeLottery = type
    },
    // table行点击
    rowClick(row, column, event) {
      // 可以取到点击行数据，列数据，事件原型，视情况自己处理数据
      console.log('rowClick：', row)
    },
    // table 收藏单元格icon点击
    getStar(event, row) {
      event.stopPropagation() // 防止事件穿透
      console.log('getStar', row)
    },
    // 详情按钮
    toDetails(row) {
      getTeamMemberInfo(
        {
          teamId: row.teamId
        }
      ).then((res) => {
        this.teamDetailsList = res.data;
      });
      this.isTeamDetails = true;
    },
    // 全部/热门切换
    changeFilterActive(v) {
      this.filterActive = v
      console.log(v)
      // todo：处理你的数据，调接口
    },
    showCascaderModel() {
      this.showCascader = !this.showCascader
      this.cascaderCache = JSON.parse(JSON.stringify(this.cascaderData)) // 存一份缓存
      this.$forceUpdate()
    },
    cancelModel() {
      // 恢复数据
      this.showCascader = !this.showCascader
      this.cascaderData = JSON.parse(JSON.stringify(this.cascaderCache))
      console.log(this.cascaderData)
      this.$forceUpdate()
    },
    confirmModel() {
      this.showCascader = !this.showCascader
      this.$forceUpdate()
      // 拿到选中的数据
      // 这里需要自己去处理一下数据，计算隐藏的比赛数量，下面这个是一个demo，假如隐藏的checkbox数量等于其比赛数
      let hideCount = 0
      this.cascaderData.forEach(item => {
        item.list.forEach(key => {
          if (!key.checked) {
            hideCount += 1
          }
        })
      })
      this.hideNumber = hideCount
    },
    checkAll() {
      this.cascaderData = this.cascaderData.map((item) => {
        return {
          ...item,
          list: item.list.map((key) => {
            return {
              ...key,
              checked: true
            }
          })
        }
      })
    },
    reCheck() {
      this.cascaderData = this.cascaderData.map((item) => {
        return {
          ...item,
          list: item.list.map((key) => {
            return {
              ...key,
              checked: !key.checked
            }
          })
        }
      })
    },
    checkHot() {
      this.cascaderData = this.cascaderData.map((item) => {
        return {
          ...item,
          list:
            item.type === 'hot'
              ? item.list.map((key) => {
                return {
                  ...key,
                  checked: true
                }
              })
              : item.list.map((key) => {
                return {
                  ...key,
                  checked: false
                }
              })
        }
      })
    },
    changeGameActive (item) {
      this.gameActive = item.value
    }
  }
}
</script>

<style scoped>
.match {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1200px;
    height: 64px;
    z-index: 99;
    background-color: #fff;
    color: #9a9a9a;

    .navbar-container {
      height: 100%;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .icon_logo {
        position: absolute;
        left: 0px;
        max-height: 60px;
        max-width: 149px;
        object-fit: cover;
        margin-right: auto;
      }
    }
    .el-tabs {
      position: relative;
    }
    .nav-panel {
      position: relative;
      a {
        display: inline-block;
        width: 66px;
        height: 64px;
        text-decoration: none;
        text-align: center;
        line-height: 64px;
        font-size: 16px;
        font-weight: 500;
      }
      p {
        display: inline-block;
        height: 18px;
        margin: 0 16px;
        vertical-align: middle;
        width: 1px;
        background-color: #eee;
      }
      .isActive {
        color: #e59900;
        border-bottom: 2px solid #e59900;
      }
    }
  }

  .schedule-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    justify-content: flex-start;
    background: url("../../assets/images/match_bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    background-color: #fff;
    background-attachment: fixed;
    width: 100%;
    margin-top: 64px;
    flex-grow: 1;

    .schedule-nav {
      min-height: 130px;
      width: 1200px;
      border-radius: 4px;
      background-color: #fff;
      .nav-date {
        height: 80px;
        border-bottom: 1px solid #eee;
        justify-content: flex-start;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .cal-panel {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 128px;
          position: relative;
          height: 64px;
          margin-left: 8px;
          cursor: pointer;
          background-color: #fafafa;
          &:hover {
            .calendar-panel {
              display: block !important;
            }
          }
          .date_icon {
            height: 24px;
            width: 24px;
          }
          p {
            font: 400 14px / 20px PingFangSC-Regular, PingFang SC;
            padding: 0 2px 0 4px;
            color: #9a9a9a;
          }
          .drop-btn {
            height: 16px;
            width: 16px;
            box-sizing: border-box;
            margin-bottom: -2px;
          }
          .calendar-panel {
            display: none;
            position: absolute;
            padding-top: 13px;
            border-radius: 4px;
            top: 60px;
            left: -110px;
            width: 347px;
            z-index: 999;
            max-width: 410px;
            margin: auto;
            .wh_content_all {
              font-family: -apple-system, BlinkMacSystemFont, PingFang SC,
                Helvetica Neue, STHeiti, Microsoft Yahei, Tahoma, Simsun,
                sans-serif;
              background-color: #fff !important;
              width: 100%;
              overflow: hidden;
              padding: 0 10px 8px;
              border-radius: 8px;
              box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.2);
              border: 1px solid #fff !important;
              .wh_top_changge {
                display: flex;
                li {
                  cursor: pointer;
                  color: #333;
                  font-size: 12px;
                  flex: 1;
                  justify-content: center;
                  align-items: center;
                  height: 34px;
                  display: flex;
                }
                .wh_jiantou1 {
                  width: 8px;
                  height: 8px;
                  border-top: 2px solid #9a9a99;
                  border-left: 2px solid #9a9a99;
                  transform: rotate(-45deg);
                }
                .wh_jiantou2 {
                  width: 8px;
                  height: 8px;
                  border-top: 2px solid #9a9a99;
                  border-right: 2px solid #9a9a99;
                  transform: rotate(45deg);
                }
                .wh_content_li {
                  font-size: 12px;
                  flex: 1;
                  justify-content: center;
                  align-items: center;
                  height: 34px;
                  cursor: auto;
                  color: #9a9a9a;
                  width: 100px;
                }
              }
              .wh_content {
                background-color: #f5f5f5;
                border-radius: 12px;
                padding: 0 3%;
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                &:nth-child(3) {
                  background-color: white !important;
                }
                .wh_content_item {
                  margin: 0;
                  padding: 0;
                  font-size: 12px;
                  width: 13.4%;
                  text-align: center;
                  color: #666;
                  position: relative;
                  height: 30px;
                  .wh_top_tag {
                    padding: 0;
                    color: #676767;
                    font-family: MicrosoftYaHei;
                    font-size: 12px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                  &:hover {
                    .wh_item_date {
                      color: #faa700;
                    }
                    .wh_want_dayhide {
                      color: #9a9a9a;
                      background: #fff;
                      border-radius: 40px;
                    }
                  }
                  .wh_item_date {
                    background-color: transparent;
                    color: #666;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                    font-size: 12px;
                    text-align: center;
                  }
                  .wh_isToday {
                    color: #e59900;
                    border-radius: 40px;
                    background-color: transparent;
                  }
                  .wh_chose_day {
                    background: #e59900;
                    border-radius: 40px;
                    color: #fff;
                  }
                  .wh_want_dayhide {
                    cursor: pointer;
                    color: #9a9a9a;
                  }
                }
              }
              .wh_content {
              }
            }
          }
        }
        .calc-panel {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          height: 100%;
          flex-grow: 1;
          &:hover {
            .date-item {
              color: #e59900;
            }
          }
          .date-item {
            flex-direction: column;
            width: 150px;
            height: 48px;
            overflow: auto;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            .date-panel {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: absolute;
              height: 68px;
              width: 108px;
              border-radius: 8px;
              .date-item-calc {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font: 400 12px / 17px PingFangSC-Regular, PingFang SC;
                font-size: 14px;
                color: #9a9a9a;
                margin: 0;
              }
              .date-item-week {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font: 400 12px / 17px PingFangSC-Regular, PingFang SC;
                font-size: 14px;
                color: #9a9a9a;
                margin: 0;
              }
            }
          }
          .dateActive {
            .date-panel {
              background-color: #e59900;
              .date-item-calc,
              .date-item-week,
              p {
                font-weight: 700;
                color: #fff;
              }
            }
          }
        }
      }
      .game-panel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
        height: 49px;
      }
      .lottery-type-panel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        justify-content: flex-start;
        width: 100%;
        height: 38px;
        background-color: #fff;
        border-top: 1px solid #eee;
        .lottery-item {
          padding-left: 20px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          flex-direction: row;
          align-items: center;
          .btn {
            width: 67px;
            height: 18px;
            background-color: #fff;
            border-radius: 9px;
            border: 1px solid #ddd;
            color: #555;
            font-family: HelveticaNeue;
            font-size: 12px;
            line-height: 16px;
            text-align: center;
            cursor: pointer;
          }
          .active_btn {
            color: #e59900;
            border: 1px solid #e59900;
          }
        }
      }
    }

    .match-panel {
      width: 1200px;
      min-height: 410px;
      margin: 10px 0;
      background-color: #fff;
    }
  }
  .footer {
    position: relative;
    width: 100%;
    bottom: 0;
    background-color: #fff;
  }
}
</style>
<style scoped>
.table-cloumn{
  align-items: center;
}


.flex-center-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font: 500 18px/22px DIN-Medium, DIN !important;
  font-size: 12px !important;
}

.flex-center-center-right {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  font: 500 18px/22px DIN-Medium, DIN !important;
  font-size: 12px !important;
}

.flex-center-center-left {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  font: 500 18px/22px DIN-Medium, DIN !important;
  font-size: 12px !important;
}
.rTable >>> .cell {
  padding: 0 4px;
}
.score-text {
  font-size: 18px;
}
.r-game {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
.game-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.game-list--item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.game-list--item-pointer {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.flex-end-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.flex-start-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.fs-12 {
  font-size: 12px;
  color: #555555;
}
.cascader-select {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-right: 16px;
  cursor: pointer;
  position: relative;
}
.match-mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 9;
}
.game-tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 32px;
  box-sizing: border-box;
  padding: 2px;
  background-color: #ebebeb;
  border-radius: 4px;
  margin-left: 30px;
}
.game-tabs-item {
  width: 44px;
  height: 28px;
  font-size: 12px;
  color: #555555;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.tabs-active {
  color: #e59900;
  background-color: #ffffff;
}
.r-game >>> .el-switch__label.is-active {
  color: #555555;
}
.cascader-model {
  width: 462px;
  height: 478px;
  background-color: #fafafa;
  position: absolute;
  top: 40px;
  left: -231px;
  z-index: 15;
}
.flex-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cascader-model-actions {
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  height: 56px;
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.cascader-model-content {
  width: 100%;
  height: calc(100% - 56px);
  overflow-y: overlay;
  box-sizing: border-box;
  padding: 10px;
}
.match >>> .el-table__row {
  cursor: pointer;
}
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.match >>> .el-checkbox {
  margin-right: 0;
  padding: 6px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 134px;
  height: 36px;
  flex-shrink: 0;
  margin-left: 10px;
  margin-top: 10px;
}
.match >>> .el-checkbox__input.is-checked .el-checkbox__inner,
.match >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #FD9900;
  border-color: #FD9900;
}
.match >>> .el-checkbox__inner:hover {
  border-color: #FD9900;
}
.match >>> .el-checkbox.is-bordered.is-checked {
  border-color: #FD9900;
}
.match >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #FD9900;
}
</style>
